<template>
<div class="wrapper" style="min-height: 900px;margin-top:20px;">
    <h2>搜索结果：</h2>
    <p>以下是标题包含关键字：{{$route.query.keyword}} 的文章</p>
    <div>
        <articleList :ListData="articleList"></articleList>
    </div>
    <div>
        <moreDataBtn :isHaveData="isHaveArticleData" :isLoading="isLoading" @moreDataClick="moreArticleDataClick"></moreDataBtn>
    </div>
</div>
</template>

<script>
import articleList from '@/components/articleList';
import {request} from '@/network/request.js';
import moreDataBtn from '@/components/moreDataBtn';
export default {
    name:"SearchResult",
    data(){
        return {
            articleList:[],
            isHaveArticleData:false,
            isLoading:false,
            articleIndex:0
        }
    },
    components:{
        articleList,
        moreDataBtn
    },
    methods:{
        getFirstData(){
            this.articleIndex=0;
            request({
                url:"/article/searchPublishedArticle?keyword="+this.$route.query.keyword+"&index="+0
            }).then(res=>{
                this.articleList=res.data.articleList;
                if(res.data.articleList.length>=7){
                    this.isHaveArticleData=true;
                }else{
                    this.isHaveArticleData=false;
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        moreArticleDataClick(){
            this.isLoading=true;
            this.articleIndex++;
            request({
                url:"/article/searchPublishedArticle?keyword="+this.$route.query.keyword+"&index="+this.articleIndex
            }).then(res=>{
                if(res.data.articleList.length>0){
                    //去重操作
                    let obj={};
                    this.articleList=this.articleList.concat(res.data.articleList).reduce((item,next)=>{
                        obj[next.id]?"":obj[next.id]=true&&item.push(next);
                        return item;
                    },[]);
                    this.isLoading=false;
                    this.isHaveArticleData=true;
                }else{
                    this.isLoading=false;
                    this.isHaveArticleData=false;
                }
            }).catch(err=>{
                this.$message.error('获取数据失败，请稍后再试');
                this.isLoading=false;
                this.isHaveArticleData=true;
                this.articleIndex--;
            })
        }
    },
    created(){
        this.getFirstData();
    }
}
</script>

<style>

</style>